<nz-modal (nzOnCancel)="handlerCancel()" [(nzVisible)]="visible" nzMaskClosable="false"
          nzTitle="{{'common.delete'|translate}} {{'common.database'|translate}}" nzWidth="80%">
  <div *nzModalContent>
    <form nz-form>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-alert nzBanner
                    nzMessage="We don't recommend that you delete the database? This operation produces the following?">
          </nz-alert>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-tag [nzColor]="'#f50'">No rollback</nz-tag>
          All data files generated in this table will be removed from the relevant Clickhouse server file system
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-tag [nzColor]="'#f50'">No rollback</nz-tag>
          All data files generated in this table will be removed from the relevant Clickhouse server file system
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-input-group [nzAddOnBefore]="addOnBefore" [nzAddOnAfter]="suffixButton">
            <input type="text" name="inputValue" nz-input [(ngModel)]="inputValue" (change)="handlerValidate()"/>
          </nz-input-group>
          <ng-template #addOnBefore>
            <button nz-button nzDanger nzType="link">{{value}}</button>
          </ng-template>
          <ng-template #suffixButton>
            <button nz-button nzType="link" (click)="handlerQuicklyEnter()">{{'common.quicklyEnter'|translate}}</button>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-collapse>
            <nz-collapse-panel nzHeader="{{'common.table'|translate}} {{tables?.columns?.length}}">
              <nz-alert nzType="error" nzMessage="Delete all data tables before deleting the database"
                        style="margin-bottom: 10px;"></nz-alert>
              <nz-table #basicTable [nzData]="tables?.columns" nzSize="small" nzTableLayout="fixed"
                        [nzLoading]="getTables">
                <thead>
                <tr>
                  <th *ngFor="let header of tables?.headers" nzEllipsis>
                    <div nz-popover nzPopoverTrigger="click" nzPopoverContent="{{header?.name}}">
                      {{header?.name}}
                    </div>
                  </th>
                  <th nzEllipsis>{{'common.action' | translate}}</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let column of basicTable.data">
                  <td *ngFor="let header of tables?.headers" nzEllipsis>
                    <div nz-popover nzPopoverTrigger="click" nzPopoverTitle="{{header.name}}"
                         nzPopoverContent="{{column[header.name]}}">
                      {{column[header.name]}}
                    </div>
                  </td>
                  <td>
                    <button nz-button nzShape="circle" nzSize="small" nzDanger nz-tooltip
                            nzTooltipTitle="{{'common.delete'|translate}} {{column.name}}"
                            nzTooltipPlacement="bottom"
                            nz-popconfirm
                            [disabled]="deleteTable"
                            nzPopconfirmTitle="Are you sure?"
                            nzOkText="{{'common.ok' | translate}}"
                            nzCancelText="{{'common.cancel' | translate}}"
                            (nzOnConfirm)="handlerDeleteTable(column)">
                      <i class="fa fa-trash-o"></i>
                    </button>
                  </td>
                </tr>
                </tbody>
              </nz-table>
            </nz-collapse-panel>
          </nz-collapse>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="primary" nzDanger [disabled]="disabled.button" [nzLoading]="loading.button"
            (click)="handlerDelete()">
      <span>{{'common.delete'|translate}}</span>
    </button>
  </div>
</nz-modal>
